<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <link rel="stylesheet" href="../../../../static/kindeditor/themes/default/default.css" th:href="@{/kindeditor/themes/default/default.css}"/>
    <link rel="stylesheet" href="../../../../static/kindeditor/themes/myeditor/myeditor.css" th:href="@{/kindeditor/themes/myeditor/myeditor.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>

        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">新增公告信息</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>内容<span>/</span><a href="/backstage/cms/notice/tolist">公告列表</a></div>
        </div><!-- 页面头部 end -->

        <div class="main-content-body">
            <div class="edit-form">
                <el-form ref="notice-form" :model="notice" :rules="rules" label-width="100px">
                    <el-form-item prop="noticeTitle" label="公告标题">
                        <el-input v-model="notice.noticeTitle" placeholder="请输入公告标题"></el-input>
                    </el-form-item>

                    <el-form-item prop="noticeTypeUuid" label="公告类型">
                        <el-select v-model="notice.noticeTypeUuid" placeholder="类型">
                            <el-option v-for="type in noticeTypeList" :key="type.uuid" :label="type.typeName" :value="type.uuid"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="sortValue" label="排序">
                        <el-input v-model="notice.sortValue"></el-input>
                    </el-form-item>

                    <el-form-item prop="state" label="上下架">
                        <el-radio-group v-model="notice.state">
                            <el-radio v-for="item in stateList" :key="item.key" :label="item.key">{{item.value}}</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item prop="noticeNote" label="公告内容">
                        <el-input type="textarea" v-model="notice.noticeNote" id="form-editor"></el-input>
                    </el-form-item>

                    <el-form-item prop="noticeCustomer" label="接收客户">
                        <el-radio-group v-model="notice.noticeCustomer">
                            <el-radio v-for="item in noticeCustomerList" :key="item.key" :label="item.key">{{item.value}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="edit-button-fixed">
	                    <div class="edit-button z-yuan-butn">
	                        <el-button type="primary" @click="saveNotice" :loading="loading">保存</el-button>
	                        <el-button @click="cancel">返回</el-button>
	                    </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script charset="utf-8" src="../../../../static/kindeditor/kindeditor-min.js" th:src="@{/kindeditor/kindeditor-min.js}"></script>
<script charset="utf-8" src="../../../../static/kindeditor/lang/zh-CN.js" th:src="@{/kindeditor/lang/zh-CN.js}"></script>
<script th:inline="javascript">
    let options = {
        width: '800px',
        height: '400px',
        items: [
            'formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'strikethrough', 'lineheight', 'multiimage', 'link', 'unlink', 'plainpaste', 'wordpaste', 'insertorderedlist',
            'insertunorderedlist', 'table', 'fullscreen'
        ],
        resizeType: 0,
        themeType: 'myeditor',
        uploadJson: '/fastdfs/file/uploadImage',
        filePostName: 'image',
        fileManagerJson: '',
    };
    KindEditor.ready(function(K) {
        window.editor = K.create('#form-editor', options);
    });
    new Vue({
        el: "#app",
        data: {
            noticeTypeList: [[${noticeTypeList}]],
            stateList: [[${stateList}]],
            noticeCustomerList: [[${noticeCustomerList}]],
            loading: false,
            notice: {
                noticeTitle: '',
                noticeTypeUuid: '',
                noticeNote: '',
                state: '',
                noticeCustomer: '',
                sortValue: ''
            },
            rules: {
                noticeTitle: [
                    {required: true, message: "请输入公告标题", trigger: 'blur'}
                ],
                noticeTypeUuid: [
                    {required: true, message: "请选择公告类型", trigger: 'blur'}
                ],
                noticeNote: [
                    {required: true, message: "请输入公告内容", trigger: 'blur'}
                ],
                state: [
                    {required: true, message: "请选择上下架状态", trigger: 'blur'}
                ],
                noticeCustomer: [
                    {required: true, message: "请选择接收客户", trigger: 'blur'}
                ],
                sortValue: [
                    {required: true, message: "请输入客服排序", trigger: 'blur'}
                ]
            }
        },
        methods: {
            saveNotice: function () {
                var self = this;
                editor.sync();
                self.notice.noticeNote = $('#form-editor').val();
                self.$refs['notice-form'].validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        $.ajax({
                            url: "/backstage/cms/notice/add",
                            type: "POST",
                            data: JSON.stringify(self.notice),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode === 1) {
                                    self.$message({
                                        message: '新增公告信息成功',
                                        type: 'success',
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cms/notice/tolist';
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '新增公告信息失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                    self.loading = false;
                                }
                            }
                        });
                    } else {
                        this.$message({
                            message: '请正确填写公告信息',
                            type: 'warning',
                            customClass: 'message-center'
                        });
                        self.loading = false;
                    }
                });
            },
            cancel: function () {
                window.location.href = "/backstage/cms/notice/tolist"
            }
        }
    });
</script>
</html>
